<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title> //功能：某些组件被执行了某些操作后，触发某些代码的执行
    <script>
        function fun() {
            alert("我被点击了")
            alert("我又被点击了")

        }
    </script>
</head>
<body>
<!--<img id="light" src="5G.jpg" onclick="fun();">//还有缺点，我们html标签和事件的操作耦合在一起了，不利于维护-->
<!--<img id="light" src="5G.jpg" onclick="alert('我被点了')">-->

/* 如何绑定事件
1.直接在html标签上，指定事件的属性（操作），属性值就是js代码
    事件：onclick()
2.通过JS
获取元素对象，指定事件属性，设置一个函数
获取到元素后，把事件赋给一个方法对象。这里不用加括号，因为 方法对象构造的时候   var 方法名 = function(){}
*/

<img  id="light2" src="5G.jpg">
<script>
    var light2 = document.getElementById("light2");
    light2.onclick=fun;
</script>

</body>
</html>